import { dialogDrag } from '../map'

const _dialogDrag = {
  // 指令的定义
  mounted (el, binding) {
    // console.log('===  dialogDrag == binding', binding)
    setTimeout(() => {
      // 蒙版
      const container = el.firstElementChild.firstElementChild
      // 弹窗的容器
      const dialog = el.firstElementChild.firstElementChild.firstElementChild
      // 拖拽的div
      // const dialogTitle = el.firstElementChild.firstElementChild.firstElementChild.firstElementChild
      const _dialogTitle = el.getElementsByClassName('el-dialog__header')

      if (_dialogTitle.length === 0) {
        // console.error('没有找到要拖拽的div', el)
      } else {
        const dialogTitle = el.getElementsByClassName('el-dialog__header')[0]
        // dialog 的宽度
        const width = binding.value.replace('%', '') //
        const { setDialog } = dialogDrag()
        // 设置
        setDialog(container, dialog, dialogTitle, width)
      }
    
    },500)
    
  },

  // 移除事件
  unmounted(el, binding) {
    setTimeout(() => {
      // 拖拽的div
      const _dialogTitle = el.getElementsByClassName('el-dialog__header')

      if (_dialogTitle.length === 0) {
        // console.error('没有找到要拖拽的div', el)
      } else {
        // 蒙版
        const container = el.firstElementChild.firstElementChild
        const dialogTitle = el.getElementsByClassName('el-dialog__header')[0]
        const { unload } = dialogDrag()
        // 设置
        unload(container, dialogTitle)
      }
    }, 500)
  }
}

/**
 * element-plus 的 dialog 的拖拽的自定义指令
 * @param {*} app 
 * @param {*} options 
 */
const install = (app, options) => {
  app.directive('dialogDrag', _dialogDrag)
}

export {
  _dialogDrag,
  install
} 
